﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
<!--    <script src="--><?//=base_url("templates/default")?><!--/js/mui.min.js"></script>-->
    <script type="text/javascript" src="<?=base_url("templates/default")?>/js/jquery-3.2.1.min.js" ></script>
    <script type="text/javascript" src="<?=base_url("templates/default")?>/js/jquery-ui.min.js" ></script>
    <!--<script type="text/javascript" src="<?=base_url("templates/default")?>/js/zepto.js" ></script>-->
    <script type="text/javascript" src="<?=base_url("templates/default")?>/js/puzzle.js" ></script>
    <link rel="stylesheet" href="<?=base_url("templates/default")?>/css/puzzle.css" />
    <link rel="stylesheet" href="<?=base_url("templates/default")?>/css/puzzle_game_style.css" />
    
    <script type="text/javascript" charset="utf-8">
        function initradio(rName,rValue){
            var rObj = document.getElementsByName(rName);
            for(var i = 0;i < rObj.length;i++){
                if(rObj[i].value == rValue){
                    rObj[i].checked =  'checked';
                }
            }
        }

    </script>
</head>
<body style="cursor: auto; margin: 0px;"  >
    <div id="collage">
        <div id="playPanel">
    		
    		<h3 style="margin-bottom: 0px;margin-top: 0px;padding-top: 5px;"><a href="#" onclick="javascript:history.back(-1);" style="text-decoration: none;color: #FFF;position: absolute;left: 20px;"><</a><?=$db["title"]?></h3>
            
            <hr>
                <div id="imgbox"  calss="imgbox">
                    <ul id="sortable" class="sortable" >
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="0" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 0% 0%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="1" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 33.33% 0%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="2" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 66.66% 0%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="3" style="background-image:url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 99.99% 0%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="4" style="background-image:url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 0% 33.33%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="5" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 33.33% 33.33%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="6" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 66.66% 33.33%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="7" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 99.99% 33.33%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="8" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 0% 66.66%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="9" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 33.33% 66.66%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="10" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 66.66% 66.66%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="11" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 99.99% 66.66%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="12" style="background-image:url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 0% 99.99%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="13" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 33.33% 99.99%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="14" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 66.66% 99.99%;"></li>
                        <li class="item ui-draggable ui-draggable-handle ui-droppable" data-value="15" style="background-image: url("<?=base_url("attachments")?><?=$db['img']?>");
                            background-position: 99.99% 99.99%;"></li>
                    </ul>
                </div>
                <div id="actualImageBox">
                    <div class="image" id="bigpics"><img id="actualImage"></div>
                        <div id="recored">
                            <div>
                                <form action="#" style="margin-bottom: 0px;font-size: 20px">
                                    容易<input type="radio" name="tRadio" value="1">
                                    困难<input type="radio" name="tRadio" value="2">
                                </form>
                            </div>
                            <div id="usergrace"style="height: 80px">
                                <div class="time">
                                    <li>时间：<h4 id="mytime" >00:00:00</h4></li>
                                </div>
                                <div class="time">
                                    <li>步数：<h4 id="div1">0</h4></li>
                                </div>
                            </div>
                        </div>
                </div>
                <div>
                    <button id="newPhoto" type="button" class="btn" style="float: left;margin-left: 30px" onclick="window.location.reload(true);">重新开始</button>
                    <button type="button"  style="display: none;" onclick="function (images);" class="btn" id="Tihuan">
                        再来一次</button>
                    <button id="newPhoto" align="center" type="button" class="btn" style="float: right;margin-right: 30px" onclick="locking()">切换图片</button>
                    <div id="ly">
                    </div>
                    <!--          浮层框架开始         -->
                    <div id="Layer2" align="center" >
                        <table id="layer2_table" >
                            <tr>
                                <td id="table_td">
                                    <div align="right" style="background-color: red ;"><a href=JavaScript:; class="STYLE1" onclick="Lock_CheckForm(this);">[关闭]</a> &nbsp;&nbsp;&nbsp;&nbsp;</div>
                                </td>
                            </tr>
                            <tr>
                                <td height="130" align="center">
                                    <div style="background: beige;">
                                        <div class="box" id="box">
                                            <div class="img_box" id="img_box">
                                                <?php foreach ($imagelist as $k=>$v): ?>
                                                    <li><a href="<?=base_url("index.php/home/index?id={$v['id']}")?>" style="color: #000000;">
                                                            <img src="<?=base_url("attachments")?><?=$v['img']?>">
                                                        </a>
                                                    </li>
                                                <?php endforeach; ?>
                                            </div>
                                        </div>
                                        <div id="left" class="switch"><p>上一张</p></div>
                                        <div id="right" class="switch"><p>下一张</p></div>
                                    </div>
                                </td>
                            </tr>-
                        </table>
                    </div>
                    <!--  浮层框架结束-->
                </div>
                <div    class="ranking" style="background-color: inherit">
                    <table border="1"  id="imagetable" class="imagetable" >
                        <tr >
                            <td colspan="2">排行榜</td>
                        </tr>
                        <tr>
                            <td>姓名</td>
                            <td>用时</td>
                        </tr>
                        <?php foreach($ranking as $k=>$v):?>
                        <tr>
                            <td><?=$v["username"]?></td>
                            <td><?=$v["user_grace"]?></td>
                        </tr>
                        <?php endforeach;?>
                    </table>
                </div>
        </div>
            <div id="gameOver" style="display: none;height: auto; ">
                    <h4 id="imgIntroduce" style="background-color: #fc9e9e;"></h4>
                <hr>
            </div>
<!--        <div id="ztbox">-->
<!--            <ul class="display">-->
<!--                --><?php //foreach ($imagelist as $k=>$v): ?>
<!--                    <li><a href="--><?//=base_url("index.php/home/index?id={$v['id']}")?><!--" style="color: #000000;">-->
<!--                            <div>-->
<!--                                <img src="--><?//=base_url("attachments")?><!----><?//=$v['img']?><!--">-->
<!--                                <div class="conten" >-->
<!--                                    <h2 >--><?//=$v['title']?><!--</h2>-->
<!--                                    <p >--><?//=$v['content']?><!--</p>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                --><?php //endforeach; ?>
<!--            </ul>-->
<!--        </div>-->
    </div>
        <script>
            var dbId=<?=$db['id']?>;
            var images = [
                { src:'<?=base_url("attachments")?><?=$db['img']?>' , title:'<?=$db['title']?>' ,introduce:'<?=$db['content']?>'},
                 ];
            $(function () {
                imagePuzzle.startGame(images);
                $('#newPhoto'&'#Tihuan').click(function () {
                    imagePuzzle.startGame(images);
                });
          });
            initradio('tRadio',1);
        </script>
    </div>
</body>
</html>





































































